<template>
	<view class="files-box">
		<view class="files-all" :style="{ maxWidth: width }">
			<view class="files" :key="key">
				<view class="files-inner" v-for="(item, index) in fileList" :key="index">
					<label class="files-name clamp">{{ item.name }}</label>
					<label class="del" @click="delfile(item)">删除</label>
				</view>
			</view>

			<view class="btn-box">
				<view class="item" v-if="type.indexOf('all') > -1">
					<button class="btn" type="primary" @click="uploadFile"><text class="add"></text></button>
					<view class="node">上传文件</view>
				</view>
				<view class="item" v-if="type.indexOf('video') > -1">
					<button class="btn" type="primary" @click="uploadVideo"><text class="add"></text></button>
					<view class="node">上传视频</view>
				</view>
				<view class="item" v-if="type.indexOf('image') > -1">
					<button class="btn" type="primary" @click="uploadImg"><text class="add"></text></button>
					<view class="node">上传图片</view>
				</view>
				<view class="item" v-if="type.indexOf('audio') > -1">
					<uni-record :maximum="60" @confirm="saveRecord"><view class="add"></view></uni-record>
					<view class="node">上传语音</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniRecord from '@/components/uni-record.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniRecord
	},
	props: {
		id: {
			type: String,
			default: 'file'
		},
		url: {
			type: String,
			default: ''
		},
		limit: {
			type: Number,
			default: 9
		},
		type: {
			type: Array,
			default: () => {
				return ['all'];
			}
		},
		width: {
			type: String,
			default: '690rpx'
		},
		formData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			key: -1,
			fileInfo: [],
			imgList: [],
			videoList: [],
			audioList: []
		};
	},
	mounted() {
		this.handelFiles();
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		uploadImg() {
			// #ifdef MP
			uni.chooseMedia({
				count: this.limit,
				sizeType: ['compressed'],
				mediaType: 'image',
				sourceType: ['album', 'camera'],
				success: (res) => {
					// this.imgList = this.imgList.concat(res.tempFiles);
					res.tempFiles.forEach((item) => {
						if (!item.path) {
							item.path = item.tempFilePath;
						}
						if (!item.name) {
							item.name = item.path.slice(9);
						}
						this.checkImg(item);
					});
				}
			});
			// #endif
			// #ifdef H5
			uni.chooseImage({
				count: this.limit,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					res.tempFiles.forEach((item) => {
						if (!item.path) {
							item.path = item.tempFilePath;
						}
						if (!item.name) {
							item.name = item.path.slice(9);
						}
						this.uploadAPI(item);
					});
				}
			});
			// #endif
		},
		uploadVideo() {
			// #ifdef MP
			uni.chooseMedia({
				count: this.limit,
				sizeType: ['compressed'],
				mediaType: 'video',
				sourceType: ['album', 'camera'],
				success: (res) => {
					// this.imgList = this.imgList.concat(res.tempFiles);
					res.tempFiles.forEach((item) => {
						if (!item.path) {
							item.path = item.tempFilePath;
						}
						if (!item.name) {
							item.name = item.path.slice(9);
						}
						this.uploadAPI(item);
					});
				}
			});
			// #endif
			// #ifdef H5
			uni.chooseVideo({
				count: this.limit,
				compressed: true,
				sourceType: ['album', 'camera'],
				success: (res) => {
					if (!res.path) {
						res.path = res.tempFilePath;
					}
					if (!res.name) {
						res.name = res.path.slice(9);
					}
					this.uploadAPI(res);
				}
			});
			// #endif
		},
		uploadFile() {
			// #ifdef MP
			uni.chooseMessageFile({
				count: this.limit,
				type: 'all',
				success: (res) => {
					res.tempFiles.forEach((item) => {
						this.uploadAPI(item);
					});
				}
			});
			// #endif
			// #ifdef H5
			uni.chooseFile({
				count: this.limit,
				type: 'all',
				success: (res) => {
					res.tempFiles.forEach((item) => {
						this.uploadAPI(item);
					});
				}
			});
			// #endif
		},
		checkImg(item) {
			uni.showLoading({
				title: '加载中...'
			});
			uni.uploadFile({
				url: this.$baseUrl + '/msg_sec_check/image',
				filePath: item.path,
				name: 'file',
				formData: {
					biz: 'temp'
				},
				header: {
					Authorization: this.userInfo.Authorization
				},
				success: (res) => {
					uni.hideLoading();
					let data = JSON.parse(res.data);
					if (data && data.data) {
						if (this.imgList.length >= this.limit) {
							this.imgList.shift();
						}
						console.log(item);
						this.uploadAPI(item);
					} else {
						this.$msg('包含违规内容！');
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$msg('上传失败！');
				}
			});
		},
		saveRecord(e) {
			if (!e) {
				this.$msg('没有内容！');
				return false;
			}
			// #ifdef H5
			let data = URL.createObjectURL(e);
			let item = {
				name: data.slice(-9) + '.wav',
				path: data
			};
			// #endif
			// #ifndef H5
			let item = {
				name: e.slice(9),
				path: e
			};
			// #endif
			this.uploadAPI(item);
		},
		uploadAPI(item) {
			console.log(item);
			uni.showLoading({
				title: '加载中...'
			});
			uni.uploadFile({
				url: this.url ? this.url : this.$baseUrl + '/file/upload',
				filePath: item.path,
				name: item.name ? item.name : item.path,
				header: {
					Authorization: this.userInfo.Authorization || ''
				},
				success: (res) => {
					uni.hideLoading();
					let data = JSON.parse(res.data);

					if (data && data.data[0]) {
						let file = {
							name: data.data[0].fileNameW ? data.data[0].fileNameW : data.data[0].name,
							path: data.data[0].path,
							size: data.data[0].size
						};
						this.fileInfo = this.fileList;
						if (this.fileInfo.length >= this.limit) {
							this.fileInfo.shift();
						}
						file && this.fileInfo.push(file);
						this.$store.commit('filePush', this.fileInfo);
						this.key--;
					} else {
						this.$msg('上传失败！');
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$msg('上传失败！');
				}
			});
		},
		delfile(item) {
			this.fileInfo = this.fileList;
			this.fileInfo.splice(this.fileInfo.indexOf(item), 1);
			this.$store.commit('filePush', this.fileInfo);
			this.key--;
		},
		handelFiles() {
			let imgType = 'bmp,jpg,jpeg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp';
			let audioType = 'm4a,wav,mp3,aac';
			let videoType = 'mp4,avi,wmv,m4v';
			this.fileList.forEach((item) => {
				if (!item.name) {
					return false;
				}

				let name = item.name.split('.');
				if (imgType.indexOf(name[name.length - 1].toLowerCase()) != -1) {
					if (item.id) {
						item.src = this.$baseUrl + '/file/download/' + item.id;
					}
					this.imgList.push(item);
				}
				if (audioType.indexOf(name[name.length - 1].toLowerCase()) != -1) {
					this.audioList.push(item);
				}
				if (videoType.indexOf(name[name.length - 1].toLowerCase()) != -1) {
					this.videoList.push(item);
				}
			});
		},
		linksImg(path) {
			return path;
		},
		previewImage(path, index) {
			let urls = [];
			this.imgList.forEach((item) => {
				urls.push(item.path);
			});
			uni.previewImage({
				current: path,
				urls: urls
			});
		}
	}
};
</script>

<style lang="scss">
.files-box {
	width: 100%;
}

.files-all {
	display: flex;
	flex-wrap: wrap;
	max-width: 690rpx;

	.files {
		margin-bottom: 10rpx;
		width: 100%;
	}
}

.files-inner {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	color: #808080;
	text-align: left;
}

.files-name {
	padding-right: 10rpx;
	width: 90%;
	flex: 1;
}

.del {
	flex-shrink: 0;
	color: #ce1617;
}

.line {
	flex-shrink: 0;
	width: 100%;
}

.btn {
	position: relative;
	display: flex;
	background: #fff;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 120rpx;
	margin: 0;
	padding: 0;
}

.add {
	width: 120rpx;
	height: 120rpx;
	cursor: pointer;
	background: #fff url('~@/static/img/add.png') no-repeat center center;
	background-size: 120rpx;
}

.btn-box {
	display: flex;

	.item {
		margin-right: 20rpx;
	}
}

.node {
	margin-top: 14rpx;
	font-size: 14px;
	color: #9b9b9b;
	line-height: 40rpx;
	text-align: center;
}
</style>
